<template>
	<view>
		
		<view class="fun_box">
				<view class="troll iconfont icon-sousuo"></view>
				
				 <u--input
				     @blur="search_word"
				     @confirm="search_word"
					 type="number"
				    v-model="search_key"
				    placeholder="输入车架号后四位查询历史订单"
				    border="none"
				    clearable
				  ></u--input>
				<!-- <input type="text" v-model="search_key" placeholder="输入车架号后四位查询历史订单" placeholder-style="color:#5E6470" /> -->
		</view>
		
		<view class="order-nav">
			<view class="list" v-for="(item ,index) in navlist" :data-index='index' @tap='setNavMenu'>
				{{item.name}}
				<view v-if="select==index" class="heng"></view>
			</view>
		</view>
		<block v-for="(item, idx) in list" :key="item.id">
		<view class="goods">
			<view class="top">
				<view class="hao">订单编号：{{ item.order_no }}</view>
				<view class="gong" v-if="item.status == 1">待支付</view>
				<view class="gong" v-if="item.status == 2">已支付</view>
				<view class="gong" v-if="item.status == 3">查询成功</view>
				<view class="gong" v-if="item.status == 4">查询失败</view>
				<view class="gong" v-if="item.status == 5">已退款</view>
			</view>
			<view class="content">
				<view class="tup"><image :src="realUrl(item.img_path)" mode=""></image></view>
				<view class="left">
					<view class="jia">车架号:{{ item.vin }}</view>
					<view class="time">{{ item.create_at }}</view>
					<view class="zuob">
						<view class="money">￥{{ item.pay_price }}</view>
						
						<block v-if="item.status == 3" >
							<view class="botn01" @click="to_look(item.req_data)" v-if="item.stype == 3">查看</view>
							<view class="botn01" v-else>
									<view class="botn01" @click="to_web(item.req_data.report.reportUrl)" >查看</view>
								<!-- <u-link :href="item.req_data.report.reportUrl" color="#000" text="查看"></u-link> -->
							</view>	
						</block>
						
						<view class="botn01" @click="to_search(item)"  v-if="item.status == 1 || item.status == 2">去查询</view>
						<view class="botn02" @click="to_search(item)" v-if="item.status == 4">去复查</view>
						<view class="botn02" style="margin-left:-6vw;" @click="to_refund(item)" v-if="item.status == 4">申请退款</view>
						
							<view class="botn02" @click="to_del(item)" v-if="item.status == 5">删除</view>
					</view>
					
				</view>
			</view>
		</view>
		
		</block>
		<block v-if="empty_show">
			<view style="height: 30vh;padding-top: 25vw;" v-if="list.length==0">
				<u-empty text="暂无记录" mode="list"></u-empty>
			</view>
		</block>
		
		        <u-modal :show="modal_show"  :title="title" @confirm="modal_close">
					<view class="slot-content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</u-modal>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modal_show : false,
				title : '交强险日期',
				content : '',
				status: 0,
				select: 0,
				empty_show : 0,
				stype : '',
				page : 1,
				search_key : '',
				load_type : 'more',
				list : [],
				navlist: [
					{
						name: '全部'
					},
					{
						name: '待支付'
					},
					{
						name: '查询完成'
					},
					{
						name: '查询失败'
					},
				],
				
			}
		},
		onLoad(opt) {
			this.select = opt.index||0;
			this.stype = opt.stype ||''; 
			this.loadData();
		},
		onReachBottom() {
			this.loadData();
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.scroll = true;
			} else {
				this.scroll = false;
			}
		},
		methods: {
			to_web(url){
				let arg = encodeURIComponent(url);
				 this.$r('/pages/public/web_view?url='+arg);
			},
			to_del(item){
				 if(item.status != 5){
					 this.showMsg('该订单状态不对');
					 return false;
				 }
				uni.$u.throttle(()=>{
					this.real_del(item.id);
				},1500)
			},
			real_del(oid){
				uni.showLoading({
					title: '删除中'
				});
				let url = this.site_url + 'api/auth/order/car_order_del?order_id='+oid;
				this.areq(url).then(res=>{
					  if(res.code == 1){
						  let index = this.list.findIndex(val => val.id === oid);
						  let msg = '删除成功';
						  this.del_list(index, msg);
					  }else{
						  uni.hideLoading();
						  this.showMsg(res.msg)
					  }
				})
			},
			//删除
			del_list(index,msg) {
				setTimeout(() => {
					this.list.splice(index, 1);
					uni.hideLoading();
					this.showMsg(msg);
				}, 600);
			},
			search_word(){
				 if(this.search_key != '' && this.search_key.length != 4){
					  this.showMsg('请输入车架的后4位数查询');
					  return false;
				 }
				uni.$u.throttle(this.pageinit(), 800)
			},
			to_refund(item){
				if(item.status != 4){
					this.showMsg('该订单状态不可退款!');
					return false;
				}
				uni.$u.throttle(()=>{
					 this.real_refund(item.id);
				}, 1500)
			},
			real_refund(oid){
				uni.showLoading({
					title: '申请中'
				});
				let url = this.site_url + 'api/auth/order/refund_hand?order_id='+oid;
				this.areq(url).then(res=>{
					  if(res.code == 1){
						    let index = this.list.findIndex(val => val.id === oid);
							setTimeout(()=>{
								uni.hideLoading();
								this.showMsg('退款成功,请稍后查看微信');
								this.list[index].status = 5;
								this.$forceUpdate();
							},600);
						 
					  }else{
						  uni.hideLoading();
						  this.showMsg(res.msg)
					  }
					
				})
				
			},
			modal_close(){
				 this.modal_show = false;
			},
			to_look(data){
				// {"code":200,"result":{
				//     "yxqs": "2022-07",
				//     "yxqz": "2023-07"
				// },"msg":"接口调用成功"}
				if(data?.yxqs){
					this.content =  data.yxqs+' 到 '+data.yxqz;
				}else{
					this.content = '查询有误';
				}
				this.modal_show = true;
			},
			to_search(order){
				let stype = parseInt(order.stype);
				switch(stype){
					case 0:
					uni.setStorageSync('car_order0',order);
					this.$r('/pages/record/weibao_1');
					break;
					case 1:
					uni.setStorageSync('car_order1',order);
					this.$r('/pages/record/chuxian_1');
					break;
					case 2:
					uni.setStorageSync('car_order2',order);
					this.$r('/pages/record/xugai_1');
					break;
					case 3:
					uni.setStorageSync('car_order3',order);
					this.$r('/pages/record/shijian_1');
					break;
				}
				
			},
			pageinit(){
				this.list = [];
				this.page = 1;
				this.load_type = 'more';
				this.empty_show = 0;
				this.loadData();
			},
			loadData(){
				
				if(this.search_key !='' && this.search_key.length != 4){
					  this.showMsg('请输入车架的后4位数查询');
					  return false;
				}
				if(this.stype === ''){
					this.showMsg('查询状态错误');
					return false;
				}
				if(this.load_type == 'loading' || this.load_type == 'no_more'){
					return;
				}
				this.load_type = 'loading';
				let url = this.site_url + 'api/auth/order/car_order_list';
				let params = {
					stype : this.stype,
					status : this.select,
					keyword :this.search_key,
					page : this.page
				}
				this.areq(url,params,'POST').then(res=>{
					this.empty_show = 1;
					 if(res.code == 1){
						 this.page++;
						 this.list = [...this.list,...res.data];
	                     this.load_type = 'more'; 
					 }else{
						 this.load_type = 'no_more';
					 }
				})
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
			    this.$r(url);
			},
			setNavMenu(e) {
				let index = e.currentTarget.dataset.index;
				this.select = index;
				this.pageinit();
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	/deep/.u-input__content{
		padding-right: 2vw !important;
	}
	.fun_box{
		width: calc(92% - 3vw);
		margin:3vw auto 0vw;
		background-color: #ffffff;
		height: 11vw;
		align-items: center;
		border-radius: 2vw;
		display: flex;
		padding-left: 3vw;
		.troll{
			color: #979AA9;
			font-size: 4vw;
		}
		input{
			font-size: 3.5vw;
			color: #5E6470;
			line-height: 6vw;
			height: 5vw;
			padding-left: 2vw;
			width: 90%;
		}		
	}
	.order-nav {
		width: 100vw;
		// height: ;
		height: 13vw;
		line-height: 13vw;
		display: flex;
	
		.list {
			width: 25%;
			text-align: center;
			position: relative;
			font-size: 4vw;
	
			.heng {
				position: absolute;
				width: 6vw;
				height: 7rpx;
				background: #ffcc32;
				border-radius: 0.6vw;
				bottom: 1.8vw;
				left: 10vw;
			}
		}
	}
.goods{
	width: calc(92% - 6vw);
	padding: 3vw;
	background-color: #fff;
	margin:3vw auto 0vw;
	border-radius: 2vw;
	.top{
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
		border-bottom: 1px solid #f7f7f8;
		padding-bottom: 2vw;
	}
	.hao{
		color: #333;
		font-size: 3.5vw;
	}
	.gong{
		color: #e6201f;
		font-size: 3.5vw;
		font-weight: bold;
	}
	.content{
		display: flex;
		margin-top: 2vw;
		.tup{
			width: 25vw;
			height: 18vw;
			image{
				width: 100%;
				height: 100%;
				border-radius: 2vw;
			} 
		}
		.left{
			width: calc(100% - 27vw);
			margin-left: 2vw;
			.jia{
				color: #333;
				font-weight: bold;
				font-size: 3.5vw;
			}
			.time{
				color: #999;
				font-size: 3.5vw;
				margin-top: 1vw;
			}
			.zuob{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 2vw;
				.money{
					color: #e6201f;
					font-size: 3.8vw;
					
				}
				.botn01{
					background-color: #ffcc32;
					color: #000;
					font-size: 3.5vw;
					height: 6vw;
					line-height: 6vw;
					padding: 0vw 2vw;
					text-align: center;
					border-radius: 1vw;
					display: flex;
					align-items: center;
				}
				.botn02{
					background-color: #eaebec;
					color: #333;
					font-size: 3.5vw;
					height: 6vw;
					line-height: 6vw;
					padding: 0vw 2vw;
					text-align: center;
					border-radius: 1vw;
				}
			}
			
		}
	}
}
</style>
